<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
           $("#add").click(function(){
              let inText = $("#inText").val();
              let l = "<li>"+inText+"</li>";
              // $("ul").html($("ul").html()+l);
              //  $("ul").append(l);
              //  $(l).appendTo($("ul"));
              //  $("li:last").after(l);
              //  $(l).insertAfter($("li:last"));
              //  $("li:first").before(l);
               $(l).insertBefore($("li:first"));
           });
            $("ul li").click(function(){
                console.log("---")
               // let l = "<li>"+$(this).html()+"</li>";
                // 使用克隆的方式实现
                // 只克隆元素,不包含事件
                // let l = $(this).clone();
                // 包含事件
                let l = $(this).clone(true);
                // 所有的默认事件是绑定在原始的HTML元素中的
                // 如果是通过DOM对象生成的HTML元素,默认不带有任何事件
                // 即:通过js创建的元素,默认没有事件
                // $("ul").html($("ul").html()+l);
                $("ul").append(l);
            });
            $("#remove").click(function(){
               $("ul").remove();
            });
            $("#clear").click(function(){
                $("ul").empty();
            })
        });
    </script>
</head>
<body>
<input type="text" id="inText">
<button id="add">追加</button>
<button id="remove">删除列表</button>
<button id="clear">清空列表</button>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
</body>
</html>